<template>
  <div class="login container">
    <Header>
      <span>找回密码</span>
    </Header>
    <section>
      <div  class="login-tel">
        <input type="text" v-model="userPwd" placeholder="请输入新的密码" pattern="[0-9]*">
      </div>
      <div class="login-btn" @click="submitBtn">确认</div>
      
    </section>
    <Tabbar></Tabbar>
  </div>
</template>

<script>
import http from "@/common/api/request";
import { Toast } from "mint-ui";
import Header from '@/views/login/HeadeR.vue'
import Tabbar from '@/components/common/TabbaR.vue'
export default {
  components:{
    Tabbar,
    Header,
  },
  data(){
    return{
        userPwd:[],
      //验证规则
        rules:{
            userPwd:{
            //手机号验证
            rule:/^\w{6,12}$/,
            msg:'密码不能为空,并且是6-12位'
          },
        },
    }
  },
    methods:{
        submitBtn(){
            if( !this.validate('userPwd') ) return ;
            //确认修改
            http
                .$axios({
                url: "/api/selectUser",
                method: "POST",
                data: {
                    phone: this.$route.query.phone,
                    pwd:this.userPwd
                },
                }).then(res=>{
                    Toast('修改成功')
                    if(res.success){
                        this.$router.push({
                            path:'/login'
                        })
                    }
                })
        },
        validate(key) {
            let bool = true;
            if (!this.rules[key].rule.test(this[key])) {
                //提示信息
                Toast(this.rules[key].msg);
                bool = false;
                return false;
            }
            return bool;
            },
        }
  
}
</script>

<style scoped lang="scss"> 
.login{
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #f5f5f5;
  div{
    margin: 0.2666rem 0;
    width: 8.93333rem;
    height: 1.17333rem;
  }
  input{
    box-sizing: border-box;
    padding: 0 0.26666rem;
    border: 1px solid #ccc;
    border-radius: 6px;
    background-color: #ffffff;
    line-height: 1.17333rem;
  }
  .login-tel{
    margin-top:0.8rem ;
    input{
      width: 8.93333rem;
    }
  }
  .login-code{
    display: flex;
    input{
      flex: 1;
    }
    button{
      line-height: 1.17333rem;
      background-color: #b0352f;
      padding: 0 0.53333rem;
      border: 0;
      border-radius: 6px;
      color: #fff;
    }
  }
  .login-btn{
    text-align: center;
    line-height: 44px;
    color: #fff;
    border-radius: 6px;
    background-color: #b0352f;
  }
  
}
</style>